<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'编辑报名信息'"
    ok-text="提交"
    @on-ok="ok">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :rules="ruleValidate" :label-width="150">
         <Row>
            <Col span="24">
              <h2 style="text-align:center">编辑报名人员信息</h2>
            </Col>
         </Row>
         <Row>
            <Col span="12">
              <FormItem prop="realName" label="姓名">
                {{form.data.realName}}
              </FormItem>
              <FormItem prop="sexName" label="性别">
                {{form.data.sexName}}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="mobile" label="手机号">
                {{form.data.mobile}}
              </FormItem>
              <FormItem prop="cardTypeName" label="证件类型">
                {{form.data.cardTypeName}}
              </FormItem>
            </Col>
         </Row>
         <Row>
            <Col span="12">
              <FormItem prop="idCard" label="证件号码">
                {{form.data.idCard}}
              </FormItem>
              <FormItem prop="signUpTime" label="报名时间">
                {{form.data.signUpTime | formatDate('YYYY-MM-DD HH:mm:Ss')}}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="groupName" label="报名组别">
                {{form.data.groupName}}
              </FormItem>
              <FormItem prop="pkRclubInfo" label="俱乐部名称">
                <Select
                  v-model="form.data.pkRclubInfo"
                  filterable
                  remote
                  :remote-method="searchRclubName"
                  :loading="searchLoading">
                <Option v-for="item in rclubList" :value="item.pkRclubInfo" :key="item.pkRclubInfo">{{item.rclubName}}</Option>
            </Select>
              </FormItem>
            </Col>
         </Row>
         <Row>
           <Col span="12">
              <FormItem prop="teamName" label="组队名称">
                <Input v-model="form.data.teamName" placeholder="请输入"></Input>
              </FormItem>
              <FormItem prop="emeryContact" label="紧急联系人">
                <Input v-model="form.data.emeryContact" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="captainName" label="是否队长">
                <Select v-model="form.data.captainName" style="width:200px">
                  <Option :value="'0'">是</Option>
                  <Option :value="'1'">否</Option>
                </Select>
              </FormItem>
              <FormItem prop="emeryMobile" label="联系人手机">
                <Input v-model="form.data.emeryMobile" placeholder="请输入"></Input>
              </FormItem>
            </Col>
         </Row>
         <Row>
            <Col span="12">
              <FormItem prop="emeryRealation" label="联系人关系">
                <Select v-model="form.data.emeryRealation" placeholder="请选择联系人关系">
                  <Option v-for="item in emeryList" :value="''+item.code" :key="''+item.code">{{item.name}}</Option>
                </Select>
              </FormItem>
            </Col>
         </Row>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'
  import activityApi from '@/api/activity'
  import clubApi from '@/api/club'
  import codeApi from '@/api/code'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    data () {
      return {
        loading: true,
        rclubList: [],
        emeryList: [],
        ruleValidate: {
          captainName: [
            { required: true, message: '请选择是否队长', trigger: 'change' }
          ],
          teamName: [
            { required: true, message: '请输入组队名称', trigger: 'change' }
          ],
          emeryContact: [
            { required: true, message: '请输入紧急联系人', trigger: 'change' }
          ],
          emeryMobile: [
            { required: true, message: '请输入联系人手机', trigger: 'change' }
          ],
          emeryRealation: [
            { required: true, message: '请选择联系人关系', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入项目!')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.$refs.form.resetFields()
        } else {
          this.detailSignUp()
          this.getEmeryList()
          this.searchRclub()
        }
      },
      async submitForm () {
        const { body } = await activityApi.signup.updateSignUpInfo(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('修改成功')
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
        this.form.visible = false
        this.$emit('submit')
      },
      async detailSignUp () {
        this.actGroupLoading = true
        const { body } = await activityApi.signup.detailSignUp({
          pkActSign: this.form.data.pkActSign
        })
        this.form.data = body.responseData
      },
      async searchRclubName (query) {
        this.form.data.signRclubName = query
        this.rclubList = []
        if (query !== '') {
          this.searchLoading = true
          const { body } = await clubApi.getRclubListLikeByRclubName({
            rclubName: query
          })
          this.rclubList = body.responseData
          this.searchLoading = false
        } else {
          this.rclubList = []
        }
      },
      async searchRclub () {
        this.rclubList = []
        if (this.form.data.signPkRclubInfo !== '') {
          const { body } = await activityApi.signup.rclubDetail({
            pkRclubInfo: this.form.data.signPkRclubInfo
          })
          this.rclubList.push(body.responseData)
        } else {
          this.rclubList = []
        }
      },
      async getEmeryList () {
        const { body } = await codeApi.list({
          codeType: 'emergent_type'
        })
        this.emeryList = body.responseData
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'cost_type')
    }
  }
</script>
